<template>
  <el-pagination
    class="base-pagination"
    v-model:currentPage="paginationData.pageNum"
    @update:currentPage="pageNumUpdate"
    v-model:pageSize="paginationData.pageSize"
    @update:pageSize="pageSizeUpdate"
    :total="paginationData.total"
    v-bind="{
      ...opts,
      ...attrs,
    }"
  ></el-pagination>
</template>

<script setup>
import { useAttrs } from 'vue';

const props = defineProps({
  paginationData: {
    type: Object,
    default: () => ({
      pageNum: 1,
      pageSize: 20,
      total: 0,
    }),
  },
});

const opts = {
  background: true,
  layout: `total, sizes, prev, pager, next, jumper`,
  pagerCount: 7,
  pageSizes: [6, 10, 15, 20],
};

const emit = defineEmits(['paginationChange']);

const attrs = useAttrs();

const pageNumUpdate = (val) => {
  emit('paginationChange', { type: 'pageNum', val });
};

const pageSizeUpdate = (val) => {
  props.paginationData.pageNum = 1;
  emit('paginationChange', { type: 'pageSize', val });
};
</script>

<style lang="less" scoped></style>
